<template>
  <div class="background-container">
    <div class="appHeader bg-light">
      <div class="left" @click="backToIndex">
        <i class="ion ion-ios-arrow-back" style="font-size: 24px"></i>
        <p class="word_num">{{ left }} / {{ total }}</p>
      </div>
      <span class="right">
          <i v-for="diyclass in icons_right"
          :class="{'ion':true,'ion-ios-checkmark-circle':diyclass,'ion-ios-checkmark-circle-outline':!diyclass}"
          style="font-size: 24px;margin-right: 0.5rem;"
          ></i>
        </span>
    </div>
    <WordStudy1 :message="wordStudy1" v-if="displayPage.study[0]" @optionclick="toDetailPage" @option-accept="choice_accept" @option-error="choice_error" :key="wordStudy1.word+Math.random()"></WordStudy1>
    <WordStudyDetail :message="wordStudyDetail" v-if="displayPage.detail" @button-accept="btn_next" @button-error="btn_error"></WordStudyDetail>
    <WordStudy2 :message="wordStudy2" v-if="displayPage.study[1]" @optionclick="toDetailPage" @option-accept="choice_accept" @option-error="choice_error" :key="wordStudy2.word+Math.random()"></WordStudy2>
    <WordStudy3 :message="wordStudy3" v-if="displayPage.study[2]" @optionclick="toDetailPage" @option-accept="choice_accept" @option-error="choice_error" :key="wordStudy3.word+Math.random()"></WordStudy3>
  </div>
</template>

<script>
import {computed, defineComponent, onMounted, provide, reactive, ref, watch} from "vue";
import axios from "../utils/axios-plugin.js";
import {useRouter} from "vue-router";
import WordStudy1 from "../components/WordStudy1.vue";
import WordStudyDetail from "../components/WordStudyDetail.vue";
import WordStudy2 from "../components/WordStudy2.vue";
import WordStudy3 from "../components/WordStudy3.vue";

export default defineComponent({
  name:'WordReview',
  components: {WordStudy1,WordStudyDetail,WordStudy2,WordStudy3},
  setup(){

    //header
    const left = ref('');
    const total = ref('');
    const icons_right = ref([]);
    //页面切换
    const wid = ref('');
    const router = useRouter()
    const displayPage = reactive({
      study : [false,false,false],
      detail : false
    });
    function backToIndex(){
      router.go(-1);
    }

    const wordStudyDetail = reactive({
      word : '',
      root_word : '',
      meanings : [],
      sentences : [],
      collocations : [],
      times:'',
      relative_words:[]
    })
    const wordStudy1 = reactive({
      word : '',
      root_word : '',
      options : [],
      right_option : '',
      root_meaning : [],
      times:'',
      relative_words:[]
    })
    const wordStudy2 = reactive({
      word : '',
      //这里只需要一个例句
      sentence : {},
      options:[],
      meanings : [],
      times:'',
      relative_words:[]
    })
    const wordStudy3 = reactive({
      word : '',
      options : [],
      right_option : '',
      times:'',
      relative_words:[]
    })

    //页面展示逻辑
    function studyPageToShow(page){
      displayPage.study.forEach((e,index)=>{
        displayPage.study[index] = false
      });
      displayPage.study[page] = true;
      displayPage.detail = false;
    }
    function toDetailPage(){
      setTimeout(()=>{
                displayPage.study.forEach((e,index)=>{
                  displayPage.study[index] = false
                });
                displayPage.detail = true;
            },800)
    }

    function updateData(response)
    {
      wid.value = response['id'];
      left.value = response['left_review'];
      total.value = response['total_review'];
      icons_right.value.splice(0,2)
      for(let i=0;i<response.times;i++){
        icons_right.value.push(true);
      }
      for(let i=0;i<2-response.times;i++){
        icons_right.value.push(false);
      }

      wordStudyDetail.word = response['word'];
      wordStudyDetail.root_word = response['root_word'];
      wordStudyDetail.meanings = response['meanings'];
      wordStudyDetail.sentences = response['sentences'];
      wordStudyDetail.collocations = response['collocations'];
      wordStudyDetail.times = response['times'];
      wordStudyDetail.relative_words = response['relative_words'];

      wordStudy1.word = response['word'];
      wordStudy1.root_word = response['root_word'];
      wordStudy1.options = response['options'];
      wordStudy1.right_option = response['right_option'];
      wordStudy1.root_meaning = response['root_meaning'];
      wordStudy1.times = response['times'];
      wordStudy1.relative_words = response['relative_words'];

      wordStudy2.word = response['word'];
      wordStudy2.options = response['similar_options'];
      //随机取一个句子
      const sentencesArray = response.sentences
      const randomIndex = Math.floor(Math.random() * sentencesArray.length);
      const targetSentence= sentencesArray[randomIndex].content;
      wordStudy2.sentence = targetSentence.replace(response['word'],'____')
      wordStudy2.meanings = response['meanings'];
      wordStudy2.times = response['times'];
      wordStudy2.relative_words = response['relative_words'];

      wordStudy3.word = response['word'];
      wordStudy3.options = response['options'];
      wordStudy3.right_option = response['right_option']
      wordStudy3.times = response['times']
      wordStudy3.relative_words = response['relative_words']
      studyPageToShow(response['times']);
    }

    axios.post('/user/goReview')
        .then(response=>{
            //word，root_word,num是字符串，其他都是数组
            if ('id' in response){
                  updateData(response)
              }else{
                router.push('/congratulation')
              }
        })
        .catch(error =>{
          console.log('请求失败',error);
        })

    //对于传输数据的赋值不能放到mount，否则传过去都是空。这是加载顺序的问题
    onMounted(()=>{
      console.log('parent mount')
    })


    //跳转到下一个单词
    function btn_error(){
      axios.post('/word/review/btn_error/'+wid.value)
      .then(response=>{
            setTimeout(
                updateData(response),800
            )
        })
        .catch(error =>{
          console.log('请求失败',error);
        })
    }

    function btn_next(){
      axios.post('/word/review/btn_next/'+wid.value)
      .then(response=>{
          setTimeout(()=>{
              if ('id' in response){
                  updateData(response)
              }else{
                router.push('/congratulation')
              }
          },800)
        })
        .catch(error =>{
          console.log('请求失败',error);
        })
    }


    //跳转到下一个单词
    function choice_accept(flag=0){
      axios.post('/word/review/yes/'+wid.value, {'flag':flag})
      .then(response=>{
          console.log(response)
          setTimeout(()=>{
            if (flag) {
              if ('id' in response){
                  updateData(response)
              }else{
                router.push('/congratulation')
              }
            }
          },800)
        })
        .catch(error =>{
          console.log('请求失败',error);
        })
    }

    function choice_error(){
      axios.post('/word/review/no/'+wid.value)
      .then(response=> {
        console.log(response)
      })
      .catch(error =>{
          console.log('请求失败',error);
        })
    }

    provide('icons_right',icons_right)

    return{
      backToIndex,
      left,
      total,
      icons_right,
      choice_accept,
      displayPage,
      //数据传输
      wordStudy1,
      wordStudy2,
      wordStudy3,
      wordStudyDetail,
      toDetailPage,
      choice_error
    }
  }

})
</script>



<style scoped lang="scss">

body:not(.dark-mode) .background-container{
  background: linear-gradient(to right top, lightblue, pink);
  position: fixed;
  left: 0;
  right: 0;
  /* 其他样式 */
}
//之后用来控制展示的添加类
.nodisplay{
  display: none;
}

.word_num{
  margin-left: 10px;
  position: relative;
  top: 8px;
}


.sentences > .card-text {
    margin: 1.5rem 0;
    font-size: 20px;
}

</style>